<div id="app">
    <div class="row">
        <template v-for="variant in ['primary','secondary','success','outline-success','warning','danger','link']">
            <div class="col-md-4 pb-2" v-for="size in ['sm','','lg']">
                <b-button :size="size" :variant="variant" :ref="`btn${size ? `_${size}` : ''}_${variant.replace(/-/g, '_')}`">
                    {{variant}} {{size}}
                </b-button>
            </div>
        </template>
        <div class="col-md-4 pb-2">
            <!-- shorthand element name also available -->
            <b-btn variant="secondary"
                   href="https://github.com/bootstrap-vue/bootstrap-vue"
                   target="_blank"
                   ref="btn_href">
                Link button!
                <img class="align-bottom ml-1"
                     src=""

                     height="20"
                     alt="github">
            </b-btn>
        </div>
        <div class="col-md-4 pb-2">
            <b-btn variant="success"
                   ref="btn_click"
                   @click="handleClick">
                Click me!
            </b-btn>
        </div>
        <div class="col-md-4 pb-2">
            <b-btn variant="primary"
                   ref="btn_block_disabled"
                   block
                   disabled>
                Can't touch this
            </b-btn>
        </div>
        <div class="col-md-4 pb-2">
            <b-btn variant="primary"
                   ref="btn_pressed"
                   :pressed.sync="btnToggle">
                Toggle Me
            </b-btn>
        </div>
    </div>
</div>
